import { defineComponent, ref } from "vue";
import "./AlertPanel.css";

export default defineComponent({
  name: "AlertPanel",
  setup() {
    const alerts = ref([
      {
        id: 1,
        level: "高",
        message: "东部战区检测到异常信号",
        time: "10:35:22",
        type: "warning",
      },
      {
        id: 2,
        level: "中",
        message: "目标A区域移动轨迹发生变化",
        time: "10:28:15",
        type: "info",
      },
      {
        id: 3,
        level: "低",
        message: "南部战区补给任务完成",
        time: "10:15:03",
        type: "success",
      },
      {
        id: 4,
        level: "高",
        message: "北方战区通信中断预警",
        time: "09:58:41",
        type: "warning",
      },
    ]);

    const getLevelClass = (level: string) => {
      switch (level) {
        case "高":
          return "alert-panel__level--high";
        case "中":
          return "alert-panel__level--medium";
        case "低":
          return "alert-panel__level--low";
        default:
          return "";
      }
    };

    return () => (
      <div class="alert-panel">
        <div class="alert-panel__header">
          <h3 class="alert-panel__title">实时警报</h3>
          <div class="alert-panel__badge">{alerts.value.length}</div>
        </div>
        <div class="alert-panel__list">
          {alerts.value.map((alert) => (
            <div key={alert.id} class="alert-panel__item">
              <div class={`alert-panel__level ${getLevelClass(alert.level)}`}>{alert.level}</div>
              <div class="alert-panel__content">
                <div class="alert-panel__message">{alert.message}</div>
                <div class="alert-panel__time">{alert.time}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  },
});
